<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收支明细</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#/stream">流水记录</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 加入流水信息 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-date-picker
            v-model="addInfo.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-select v-model="addInfo.isCome" placeholder="收支" clearable>
            <el-option label="普通" :value="0"></el-option>
            <el-option label="收入" :value="1"></el-option>
            <el-option label="支出" :value="2"></el-option>
            <el-option label="转账" :value="3"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select placeholder="账户" v-model="addInfo.acc" clearable>
            <el-option
              v-for="item in accList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="addInfo.type" placeholder="交易类型">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="addInfo.money" placeholder="请输入金额"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="addInfo.remark" placeholder="请输入备注"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="addAcc()">加入</el-button>
        </el-col>
      </el-row>

      <!-- 查询流水信息 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-date-picker
            v-model="iTime"
            type="month"
            placeholder="选择月"
            @change="getStream"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="5">
          <el-button type="danger" v-if="isDel" @click="deleteIds(delSelection)">删除</el-button>
        </el-col>
      </el-row>

      <!-- 流水列表数据 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >

        <el-table-column type="selection" width="50">
        </el-table-column>

        <el-table-column label="日期" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.date | dateFormat }}
          </template>
        </el-table-column>

        <el-table-column label="收支" width="80" align="center">
          <template slot-scope="scope">
            <el-select size="small" v-model="editForm.isCome"
                       v-if="editForm.isEdit === false && editForm.id === scope.row.id">
              <el-option label="普通" :value="0"></el-option>
              <el-option label="收入" :value="1"></el-option>
              <el-option label="支出" :value="2"></el-option>
              <el-option label="转账" :value="3"></el-option>
            </el-select>
            <el-tag type="success" v-if="scope.row.isCome === 1 && editForm.id !== scope.row.id">收入</el-tag>
            <el-tag type="danger" v-if="scope.row.isCome === 2 && editForm.id !== scope.row.id">支出</el-tag>
            <el-tag type="warning" v-if="scope.row.isCome === 3 && editForm.id !== scope.row.id">转账</el-tag>
            <el-tag type="info" v-if="scope.row.isCome === 0 && editForm.id !== scope.row.id">普通</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="账户" width="120" align="center">
          <template slot-scope="scope">
            <el-select size="small" v-if="editForm.id !== scope.row.id" v-model="scope.row.acc" disabled
                       placeholder="请选择">
              <el-option
                v-for="item in accList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select size="small" v-else v-model="editForm.acc" placeholder="请选择">
              <el-option
                v-for="item in accList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="金额" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="editForm.id !== scope.row.id">￥{{ scope.row.money }}</span>
            <el-input size="small" v-if="editForm.id === scope.row.id" v-model="editForm.money"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="交易类型" width="120" align="center">
          <template slot-scope="scope">
            <el-select size="small" v-if="editForm.id !== scope.row.id" v-model="scope.row.type" disabled
                       placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select size="small" v-else v-model="editForm.type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="备注" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span v-if="editForm.id !== scope.row.id">{{ scope.row.remark }}</span>
            <el-input size="small" v-if="editForm.id === scope.row.id" v-model="editForm.remark"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editInfo(scope.$index, scope.row, false)"
                       v-if="editForm.isEdit === true || scope.row.id !== editForm.id">编辑
            </el-button>
            <el-row v-if="scope.row.id === editForm.id && editForm.isEdit === false">
              <el-col>
                <el-button type="success" size="small" @click="editInfo(scope.$index, scope.row, false)">完成
                </el-button>
              </el-col>
              <el-col>
                <el-button type="warning" size="small" @click="editInfo(scope.$index, scope.row, true)">取消
                </el-button>
              </el-col>
            </el-row>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-size="queryInfo.size"
        layout="total, prev, pager, next"
        :total="queryInfo.total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 流水列表
      tableData: [],
      // 查询日期条件，未格式化
      iTime: null,
      // 查询条件
      queryInfo: {
        size: 20,
        page: 1,
        total: 0,
        timeYue: ''
      },
      // 流水类型列表
      typeList: [],
      // 账户列表
      accList: [],
      // 编辑记录索引
      editIndex: 0,
      // 编辑表单
      editForm: {
        isEdit: true,
        id: 0,
        isCome: 0,
        acc: 0,
        money: 0,
        type: 0,
        remark: '',
        iMoney: 0,
        // 旧流水表单
        oldStream: []
      },
      // 将添加的信息
      addInfo: {
        date: null,
        isCome: null,
        acc: null,
        money: null,
        type: null,
        remark: null
      },
      isDel: false,
      delSelection: []
    }
  },
  created() {
    this.getStream()
  },
  mounted() {
    this.getTypeList()
    this.getAccList()
  },
  methods: {
    // 格式化日期
    dateFormat(originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      return `${y}-${m}`
    },
    // 获取所有流水信息
    getStream() {
      if (this.iTime != null) {
        this.queryInfo.timeYue = this.dateFormat(this.iTime)
        console.log(this.queryInfo.timeYue)
      }
      this.$ajax.get('/stream/findAll', this.queryInfo).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.queryInfo.total = res.data.data.total
        }
      })
      this.queryInfo.timeYue = ''
    },
    // 页码改变监听
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getStream()
    },
    // 获取所有类型
    getTypeList() {
      this.$ajax.get('/stream/findTypes').then((res) => {
        if (res.data.code === 200) {
          this.typeList = res.data.data
        }
      })
    },
    // 获取账单列表
    getAccList() {
      this.$ajax.get('/account/findAll').then((res) => {
        if (res.data.code === 200) {
          this.accList = res.data.data
        }
      })
    },
    // 编辑信息
    editInfo(index, row, isCancel) {
      if (!isCancel) {
        if (this.editForm.isEdit === true) {
          this.editIndex = index
          // 编辑按钮
          this.editForm.oldStream = this.tableData[index]
          this.editForm.isEdit = false
          this.editForm.id = this.tableData[index].id
          this.editForm.isCome = this.tableData[index].isCome
          this.editForm.acc = this.tableData[index].acc
          this.editForm.money = this.tableData[index].money
          this.editForm.iMoney = this.tableData[index].money
          this.editForm.type = this.tableData[index].type
          this.editForm.remark = this.tableData[index].remark
        } else {
          // 完成按钮
          if (this.editIndex === index) {
            this.$ajax.post('/stream/update',
              this.editForm
            ).then((res) => {
              if (res.data.code === 200) {
                row.isCome = this.editForm.isCome
                row.acc = this.editForm.acc
                row.money = this.editForm.money
                row.type = this.editForm.type
                row.remark = this.editForm.remark
                this.$set(this.tableData, index, row)
                this.editSuccessMsg(res.data.data)
              }
            })
          }
          this.editForm.isEdit = true
          this.editForm.id = 0
        }
      } else {
        // 取消按钮
        this.editForm.isEdit = true
        this.editForm.id = 0
      }
    },
    editSuccessMsg(data) {
      this.$notify({
        title: '修改成功',
        type: 'success',
        dangerouslyUseHTMLString: true,
        message:
          '<span style="color: #177cb0; font-weight: bolder">' +
          data.accountMain.name +
          '</span>' +
          '</br>' +
          '当前余额为: ' + data.accountMain.balance + ' 元'
      })
    },
    // 添加信息
    addAcc() {
      if (this.addInfo.date == null || this.addInfo.isCome == null ||
        this.addInfo.acc == null || this.addInfo.money == null ||
        this.addInfo.type == null) {
        return this.$message.error('某项不能为空')
      }
      this.$ajax.post('/stream/addAcc', this.addInfo).then((res) => {
        if (res.data.code === 200) {
          this.addSuccessMsg(res.data.data)
          this.getStream()
        }
      })
    },
    addSuccessMsg(data) {
      this.$notify({
        title: '添加成功',
        type: 'success',
        dangerouslyUseHTMLString: true,
        message:
          '<span style="color: #177cb0; font-weight: bolder">' +
          data.name +
          '</span>' +
          '</br>' +
          '当前余额为: ' + data.balance + ' 元'
      })
    },
    handleSelectionChange(val) {
      this.delSelection = val
      this.isDel = val.length > 0;
    },
    deleteIds(ids) {
      console.log(ids)
      this.$ajax.post('/stream/delIds', ids).then((res) => {
        if (res.data.code === 200) {
          this.getStream()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 10px;
}
</style>
